<template>
    <div>
        <div class="formContainer">
            <div class="avatarContainer">
                <el-upload
                        class="avatar-uploader"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm jform">
                <el-form-item label="书号" prop="BkNO" label-width="120px">
                    <el-input v-model="ruleForm.BkNO" style="width: 217px;"></el-input>
                </el-form-item>
                <el-form-item label="书名" prop="name" label-width="120px">
                    <el-input v-model="ruleForm.name" style="width: 217px;"></el-input>
                </el-form-item>
                <el-form-item label="作者" prop="author" label-width="120px">
                    <el-input v-model="ruleForm.author" style="width: 217px;"></el-input>
                </el-form-item>
                <el-form-item label="出版社" prop="press" label-width="120px">
                    <el-input v-model="ruleForm.press" style="width: 217px;"></el-input>
                </el-form-item>
                <el-form-item label="出版时间" prop="date" label-width="120px">
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date"
                                        style="width: 100%;" value-format="yyyy-MM-DD hh:MM:ss"></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="语言" prop="language" label-width="120px">
                    <el-select v-model="ruleForm.language" placeholder="请选择">
                        <el-option label="中文" value="0"></el-option>
                        <el-option label="英文" value="1"></el-option>
                        <el-option label="日文" value="3"></el-option>
                        <el-option label="俄文" value="4"></el-option>
                        <el-option label="德文" value="5"></el-option>
                        <el-option label="法文" value="6"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="页数" prop="pageNum" label-width="120px">
                    <el-input v-model="ruleForm.pageNum" style="width: 217px;"></el-input>
                </el-form-item>
                <el-form-item label="单价" prop="price" label-width="120px">
                    <el-input v-model="ruleForm.price" style="width: 217px;"></el-input>
                </el-form-item>
                <el-form-item label="ISBN" prop="ISBN" label-width="120px">
                    <el-input v-model="ruleForm.ISBN" style="width: 217px;"></el-input>
                </el-form-item>
                <el-form-item label="分类号" prop="category" label-width="120px">
                    <el-input v-model="ruleForm.category" style="width: 217px;"></el-input>
                </el-form-item>
                <el-form-item label="入库数量" prop="qty" label-width="120px">
                    <el-input v-model="ruleForm.qty" style="width: 217px;"></el-input>
                </el-form-item>
                <el-form-item label="入库时间" prop="enterDate" label-width="120px">
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.enterDate"
                                        style="width: 100%;" value-format="yyyy-MM-DD hh:MM:ss"></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="状态" prop="status" label-width="120px">
                    <el-select v-model="ruleForm.status" placeholder="请选择">
                        <el-option label="在馆" value="在馆"></el-option>
                        <el-option label="借出" value="借出"></el-option>
                        <el-option label="遗失" value="遗失"></el-option>
                        <el-option label="变卖" value="变卖"></el-option>
                        <el-option label="销毁" value="销毁"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="内容简介" prop="content"  label-width="120px">
                    <el-input type="textarea" v-model="ruleForm.content"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">立即办理</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>


        </div>
    </div>
</template>

<script>
    import {mapState} from "vuex";
    import {addBook} from "@/api";

    export default {
        name: "",
        data() {
            return {
                params: {},
                imageUrl: '',
                ruleForm: {
                    id:0,
                    name: '',
                    BkNO: '',
                    author: '',
                    press: '',
                    date: '',
                    language: '',
                    pageNum: '',
                    price: '',
                    ISBN: '',
                    category: '',
                    content: '',
                    qty: '',
                    enterDate:'',
                    status: ''
                },
                rules: {
                    name: [
                        {required: true, message: '请输入书名', trigger: 'blur'},
                        {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'}
                    ],
                    BkNO: [
                        {required: true, message: '请输入书号', trigger: 'blur'},
                        {max: 10, min: 10, message: "长度必须是十位", trigger: 'blur'}
                    ],
                    author: [
                        {required: true, message: '请输入作者', trigger: 'blur'},
                        {max: 10, min: 1, message: "长度在 1 到 10 个字符", trigger: 'blur'}
                    ],
                    press: [
                        {required: true, message: '请输入出版社', trigger: 'blur'},
                        {max: 10, min: 1, message: "长度在 1 到 10 个字符", trigger: 'blur'}
                    ],
                    date: [
                        {required: true, message: '请输入出版时间', trigger: 'blur'},
                    ],
                    language: [
                        {required: true, message: '请输入语言', trigger: 'blur'},
                        {max: 10, min: 1, message: "长度在 1 到 10 个字符", trigger: 'blur'}
                    ],
                    pageNum: [
                        {required: true, message: '请输入页数', trigger: 'blur'},
                        {max: 4, min: 1, message: "长度在 1 到 4 个字符", trigger: 'blur'}
                    ],
                    price: [
                        {required: true, message: '请输入单价', trigger: 'blur'},
                        {max: 6, min: 1, message: "长度在 1 到 6 个字符", trigger: 'blur'}
                    ],
                    ISBN: [
                        {required: true, message: '请输入ISBN号', trigger: 'blur'},
                    ],
                    category: [
                        {required: true, message: '请输入分类号', trigger: 'blur'},
                    ],
                    content: [
                        {required: false, message: '请输入简介', trigger: 'blur'},
                    ],
                    qty: [
                        {required: true, message: '请输入入库数量', trigger: 'blur'},
                        {max: 3, min: 1, message: "长度在 1 到 3 个字符", trigger: 'blur'}
                    ],
                    enterDate: [
                        {required: true, message: '请输入入馆时间', trigger: 'blur'},
                    ],
                    status: [
                        {required: true, message: '请选择书籍状态', trigger: 'change'}
                    ]
                }
            };
        },
        mounted() {

        },
        computed: {
            ...mapState({
                addStatus: (state) => state.Reader.addStatus
            })
        }
        ,
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    this.params = this.ruleForm
                    if (valid) {
                        this.addBookFn(this.ruleForm)
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            async addBookFn(params={}){
                let response = await addBook(params);
                if (response.code==200){
                    alert("入库成功")
                    this.$router.replace("/book/addBook")
                }else {
                    alert("有些数据不合理")
                }
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }

        }

    }
</script>

<style scoped>
    .formContainer {
        width: 500px;
        margin: 0 auto;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;


    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

    .avatarContainer {
        width: 178px;
        height: 178px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        margin-left: 125px;
        margin-bottom: 10px;
        border-radius: 10px;
    }
</style>
